<template>
  <div>
    <div id="main" style="width: 600px; height: 400px"></div>
  </div>
</template>

<script>

import {monthData} from "@/api/crm/monthData";

export default {
  name: "showIndex",
  data() {
    return {
      tableData: [],
      //图表配置项对象
    };
  },
  methods: {
    drawChart(result) {
      let y=[];
      for (let i = 0; i < result.length; i++) {
        y[i]=result[i].counts;
      }

      let myChart = this.$echarts.init(document.getElementById("main"));

      // 指定图表的配置项和数据
      let option = {
        title: {
          text: "月统计",
        },
        tooltip: {},
        legend: {
          data: ["完成数"],
        },
        xAxis: {
          //, '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'
          data: ['四月', '五月', '六月', '七月', '八月']
        },
        yAxis: {},
        series: [
          {
            name: "完成数",
            type: "bar",
            data: y,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。

      // option.xAxis[0].data = dateArr;
      myChart.setOption(option);
    },
  },
  mounted() {
    monthData().then(result => {
      this.drawChart(result);
    })
  }
};
</script>
<style></style>
